<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
  // *  对象解构赋值基本语法
  // > 对象的语法形式是在一个赋值操作符= 右边放置一个对象字面量
  {
      // 对象字面量
      const obj = {
		  a:1,// 名字为a的属性，值为1
          fn:function(){
			  // 声明了一个名字为fn的函数。
          }
      }
	  // const a = obj.a;
	  // const fn = obj.fn;
	  // 解构赋值其实是上面两行代码的简写形式（语法糖）
      const {a,fn} = obj;// 将obj.a赋值给常量a,将obj.fn属性赋值给常量fn
  }
  // * 顺序不用一一对应
  {
	  // const obj = {
		//   a:1,
      //     b:2
      // }
	  // const {b,a} = obj;
	  // console.log(a,b);// 1 2
  }
  // * = 右侧可以是一个常量或变量
  {
	  // const obj = {
		//   a:1,
      //     b:2
      // }
	  // const {a,b} = obj;// 解构常量
      // const obj2 = {
		//   username:"zhangsan",
      //     age:100
      // }
	  // const {username,age} = obj2;// 解构变量
	  // console.log(username,age);// zhangsan 100
  }
  // * 嵌套对象解构
  // >  解构嵌套对象仍然与对象字面量的语法相似，可以将对象拆解以获取想要的信息
  {
	  // const obj = {
		//   username:"zhangsan",
      //     info:{
		// 	  age:100
      //     }
      // };
	  // // const {username,info} = obj;
	  // // const {age} = info;
	  // // console.log(username,info,age);// zhangsan {age:100} 100
      //
      // const {username,info:{age}} = obj;
	  // console.log(username,age);// zhangsan 100
  }
  // * 可忽略解构源的属性
  {
	  // const obj = {
		//   a:1,
      //     b:2,
      //     c:3,
      //     d:4
      // }
	  // const {a,c} = obj;
	  // console.log(a,c);// 1 3
  }
  // * 剩余运算符
  {
	  const obj = {
		  a:1,
          b:2,
          c:3,
          d:4,
          e:5,
          f:6
      }
	  // const {a,b,c,...haha} = obj;
	  // console.log(a,b,c,haha);// 1 2 3 {d:4,e:5,f:6}

	  // const {a,f,...haha} = obj;
	  // console.log(a,f,haha);// 1 6 {b:2,c:3,d:4,e:5}

      // 剩余运算符只允许放置在最后边
	  // const {...haha,a,f} = obj;
	  // console.log(a,f,haha);// 1 6 {b:2,c:3,d:4,e:5}
  }
  // * 不完全解构：变量名称在对象中不存在
  // > 使用解构赋值表达式时，如果指定的变量名称在对象中不存在，那么这个变量会被赋值为undefined
  {
	  // const obj = {
		//   a:1,
      //     b:2,
      //     c:3
      // }
	  // const {a,b,c,d} = obj;
	  // console.log(a,b,c,d);// 1 2 3 undefined
  }
  // * 解构默认值(常用)
  // > 当指定的属性不存在时，可以定义一个默认值：在属性名称后添加一个等号(=)和相应的默认值即可
  // {
	//   const obj = {
	// 	  a: 1,
	// 	  b: 2,
	// 	  c: 3,
  //         f:100
	//   }
	//   const {a, b, c, d=4,f=200} = obj;// 默认值：当属性不存在时通过=设置的值。
	//   console.log(a, b, c, d,f);// 1 2 3 4 100
  // }

  // *  为非同名局部变量赋值 ，可避免命名冲突
  // >  如果希望使用不同命名的局部变量来存储对象属性的值，`ES6`中的一个扩展语法可以满足需求，
  //    这个语法与完整的对象字面量属性初始化程序的很像。
  {
	  // const username = "zhangsan";
	  // const obj = {
		//   username:"lisi",
      //     age:100
      // }
	  // const {username:qita,age} = obj;
	  // console.log(username,qita,age);// zhangsan lisi 100
  }

  // *  函数传参数
  // > 解构赋值表达式的值与表达式右侧(也就是=右侧)的值相等，
  // 如此一来，在任何可以使用值的地方都可以使用解构赋值表达式
  {
	  const obj = {
		  a:1,
          b:2,
          c:3
      }
	  const {a,b,c} = obj;
	  function fn({a,b,c}){
		  console.log(a,b,c)
      }
	  fn(obj);
  }
</script>
</html>